<template>
 <div class="page-box">
 	<div class="page-title">
    <div class="returnPage" @click="returnPage">返回</div>
  </div>
  <div class="page-main">
    <!-- 左1行 -->
		<div class="page-main-small">
    <div class="page-grid">
     <div class="page-grid-title">
      <img src="../../../assets/img/realEstate/comHousedeal/title2-1.png" alt="">
     </div>
     <div class="page-grid-ec" style="position: relative;">
      <div class="time-pic absolute" style="right: 0px;">
       <div class="time-com time-coms"> {{Data01.times}}
        <img src="../../../assets/img/realEstate/triangle.png" alt="">
        <timeSelect :type="1" :timeType="2"  @timeValueChange="timeValueChanges"></timeSelect>
       </div>
      </div>
      <div class="grid-chart charH" >
        <barLinePublic class="charH"
                v-if="echarData01.xAxisData.length > 0"
                :housingSupplyStatsData="echarData01"
                @dialogData="dialogData"
        ></barLinePublic>
      </div>
     </div>
    </div>
    </div>
    <!-- center -->
    <div class="page-main-map" style="position: relative;">
      <div class="mapBox">
    <mapBox
        v-if="realEstateMiddleData.regions[0].length > 0"
        :housingSupplyStatsData="realEstateMiddleData"
        @mapNameChange="mapNameChange"
        style="height: 100%; width: 100%"
    ></mapBox>
    <div class="map-address">辽宁省{{ cityObj.cityName == "" ? "" : "-" + cityObj.cityName }}</div>
  </div>
    </div>
    <!-- 右1行 -->
		<div class="page-main-small">
    <div class="page-grid">
     <div class="page-grid-title" style="position: relative;">
      <img src="../../../assets/img/realEstate/comHousedeal/title2-2.png" alt="">
      <div class="tab-card">
        <div :class="tab_index==1?'tab-index':'tab-indexs'" @click="tabIndex(1)">销售面积</div>
        <div :class="tab_index==2?'tab-index':'tab-indexs'" @click="tabIndex(2)">销售金额</div>
      </div>
     </div>
     <div class="page-grid-ec" style="position: relative;">
      <div class="time-pic absolute" style="right: 0px;">
       <div class="time-com "> {{Data02.times[0]}}至{{Data02.times[1]}}
        <img src="../../../assets/img/realEstate/triangle.png" alt="">
        <timeSelect :type="2" :timeType="1" @timeValueChange="timeValueChanges"></timeSelect>
       </div>
      </div>
      <div class="grid-chart charH" >
        <barLinePublic class="charH"
                v-if="echarData02.xAxisData.length > 0"
                :housingSupplyStatsData="echarData02"
                @dialogData="dialogData"
        ></barLinePublic>
      </div>
     </div>
    </div>
    </div>
    <!-- 左2行 -->
		<div class="page-main-small">
    <div class="page-grid">
     <div class="page-grid-title">
      <img src="../../../assets/img/realEstate/comHousedeal/title2-3.png" alt="">
     </div>
     <div class="page-grid-ec" style="position: relative;">
      <div class="time-pic absolute" style="right: 0px;">
       <div class="time-com "> {{Data03.times[0]}}至{{Data03.times[1]}}
        <img src="../../../assets/img/realEstate/triangle.png" alt="">
        <timeSelect :type="3" :timeType="1" @timeValueChange="timeValueChanges"></timeSelect>
       </div>
      </div>
      <div class="grid-chart charH" >
        <barLinePublic class="charH"
                v-if="echarData03.xAxisData.length > 0"
                :housingSupplyStatsData="echarData03"
                @dialogData="dialogData"
        ></barLinePublic>
      </div>
     </div>
    </div>
    </div>
    <!-- 右2行 -->
		<div class="page-main-small">
    <div class="page-grid">
     <div class="page-grid-title">
      <img src="../../../assets/img/realEstate/comHousedeal/title2-4.png" alt="">
     </div>
     <div class="page-grid-ec" style="position: relative;">
      <div class="time-pic absolute" style="right: 0px;">
       <div class="time-com "> {{Data04.times[0]}}至{{Data04.times[1]}}
        <img src="../../../assets/img/realEstate/triangle.png" alt="">
        <timeSelect :type="4" :timeType="1" @timeValueChange="timeValueChanges"></timeSelect>
       </div>
      </div>
      <div class="grid-chart charH" >
        <barLinePublic class="charH"
                v-if="echarData04.xAxisData.length > 0"
                :housingSupplyStatsData="echarData04"
                @dialogData="dialogData"
        ></barLinePublic>
      </div>
     </div>
    </div>
    </div>
    <!-- 底部 -->
		<div class="page-footer">
        <div class="page-main-small">
          <div class="page-grid">
          <div class="page-grid-title">
            <img src="../../../assets/img/realEstate/comHousedeal/title2-5.png" alt="">
          </div>
          <div class="page-grid-ec" style="position: relative;">
            <div class="time-pic absolute" style="right: 0px;">
            <div class="time-com time-coms"> {{Data05.times}}
              <img src="../../../assets/img/realEstate/triangle.png" alt="">
              <timeSelect :type="5" :timeType="2"  @timeValueChange="timeValueChanges"></timeSelect>
            </div>
            </div>
            <div class="grid-chart charH" >
              <barLinePublic class="charH"
                      v-if="echarData05.xAxisData.length > 0"
                      :housingSupplyStatsData="echarData05"
                      @dialogData="dialogData"
              ></barLinePublic>
            </div>
          </div>
          </div>
        </div>
        <div class="page-main-small">
          <div class="page-grid">
          <div class="page-grid-title">
            <img src="../../../assets/img/realEstate/comHousedeal/title2-6.png" alt="">
          </div>
          <div class="page-grid-ec" style="position: relative;">
            <div class="time-pic absolute" style="right: 0px;">
            <div class="time-com "> {{Data06.times[0]}}至{{Data06.times[1]}}
              <img src="../../../assets/img/realEstate/triangle.png" alt="">
              <timeSelect :type="6" :timeType="1" @timeValueChange="timeValueChanges"></timeSelect>
            </div>
            </div>
            <div class="grid-chart " >
              <barLinePublic class="charH"
                      v-if="echarData06.xAxisData.length > 0"
                      :housingSupplyStatsData="echarData06"
                      @dialogData="dialogData"
              ></barLinePublic>
            </div>
          </div>
          </div>
        </div>
			</div>
		</div>
    <magnify
    v-if="magnifyEchartData"
    :housingSupplyStatsData="magnifyEchartData"
    @closeDialog="closeDialog"
    ></magnify>
	</div>
</template>

<script setup lang="ts">
import { ref,reactive, onMounted, onBeforeUnmount, computed } from 'vue';
import { barLineParamsData } from "@/utils/chartsPbulic";
import mapBox from "@/components/realEstate/map.vue";
import barLinePublic from "@/components/realEstate/barLinePbulic.vue";
import timeSelect from "@/components/realEstate/timeSelect.vue";
import magnify from "@/components/public/magnify.vue";
import {useRouter} from 'vue-router'
import { getCityName } from '@/utils/cityList'

import {
  selectMarketTrendPriceIndex,
  selectMarketTrendSituationTrend,
  selectMarketTrendPriceTrend,
  selectMarketResidenceTrend,
  selectMarketTrendPriceAndArea,
  selectResidenceSellSupply,
  selectThermodynamic,
} from '@/api/realEstate/comHousedeal/comHousedealTwo'

// 初始化数据
const fixedCityCode =   localStorage.getItem("cityCode")
const router=useRouter()
const echarData01 = ref({//新建商品住宅销售价格指数统计
    xAxisData: [],
})
const echarData02 = ref({//商品房销售情况走势
    xAxisData: [],
})
const echarData03 = ref({//新建商品住宅销售价格走势
    xAxisData: [],
})
const echarData04 = ref({//商品房与商品住宅走势
    xAxisData: [],
})
const echarData05 = ref({//商品住宅销售面积与价格统计
    xAxisData: [],
})
const echarData06 = ref({//历年住宅销售供应统计
    xAxisData: [],
})
const Data01 = ref({
  times:'',
})
const Data02 = ref({
  times:'',
})
const Data03 = ref({
  times:'',
})
const Data04 = ref({
  times:'',
})
const Data05 = ref({
  times:'',
})
const Data06 = ref({
  times:'',
})
const realEstateMiddleData = ref({//地图
  regions: [[]],
});
const cityObj = ref({
  cityName: "",
  cityCode: "",
});
const magnifyEchartData = ref(null)//放大框
const tab_index = ref(1)//图一tab
// 图一切换卡片
const tabIndex = (i) => {
	tab_index.value = i;
  getEcharData02()
}
//新建商品住宅销售价格指数统计
const getEcharData01 = async() => {
  let { data } = await selectMarketTrendPriceIndex({ cityCode: cityObj.value.cityCode,startMonth:Data01.value.times});
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
  let legendStyle = {
    show: true,
    left: 5,
    top: 5,
    itemWidth: 18,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "5%",
    right: "5%",
    bottom: "3%",
    top: "28%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "指数",
        type: "1",
      },
      {
        name: "同比增长率",
        type: "2",
      },
    ],
    [
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "bar",
        type: "2",
        areaStyleType: "1",
        stack: "1",
      },
    ],
    lineBarArr,
    [
      {
        a: "#55BBEB",
        b: "#074083",
      },
      {
        a: "#F0C44B",
        b: "#E38319",
      },
            {
        a: "#E55151",
        b: "#E55151",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData01.value = paramsData
}
//商品房销售情况走势
const getEcharData02 = async() => {
  let { data } = await selectMarketTrendSituationTrend({ cityCode: cityObj.value.cityCode,startMonth:Data02.value.times[0],endMonth:Data02.value.times[1],marketTrendType:tab_index.value});
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
	let legendStyle = {
    show: true,
    left: 5,
    top: 5,
    itemWidth: 18,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "5%",
    right: "5%",
    bottom: "3%",
    top: "28%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "金额(万元)",
        type: "1",
      },
      {
        name: "同比增长率",
        type: "2",
      },
    ],
    [
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "line",
        type: "2",
        areaStyleType: "1",
        stack: "1",
      },
    ],
    lineBarArr,
    [
      {
        a: "#E47D7D",
        b: "#CC3E3E",
      },
      {
        a: "#24E0E6",
        b: "#24E0E6",
      },
            {
        a: "#E55151",
        b: "#E55151",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData02.value = paramsData
}
//新建商品住宅销售价格走势
const getEcharData03 = async() => {
  let { data } = await selectMarketTrendPriceTrend({ cityCode: cityObj.value.cityCode,startMonth:Data03.value.times[0],endMonth:Data03.value.times[1]});
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
	let legendStyle = {
    show: true,
    left: 5,
    top: 5,
    itemWidth: 18,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "5%",
    right: "5%",
    bottom: "3%",
    top: "28%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "指数",
        type: "1",
      },
      {
        name: "同比增长率",
        type: "2",
      },
    ],
    [
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "line",
        type: "2",
        areaStyleType: "1",
        stack: "1",
      },
    ],
    lineBarArr,
    [
      {
        a: "#24E1E7",
        b: "#086063",
      },
      {
        a: "#E55151",
        b: "#E55151",
      },
            {
        a: "#E55151",
        b: "#E55151",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData03.value = paramsData
}
//商品房与商品住宅走势
const getEcharData04 = async() => {
  let { data } = await selectMarketResidenceTrend({ cityCode: cityObj.value.cityCode,startMonth:Data04.value.times[0],endMonth:Data04.value.times[1]});
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
	let legendStyle = {
    show: true,
    left: 5,
    top: 5,
    itemWidth: 18,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "5%",
    right: "5%",
    bottom: "3%",
    top: "28%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "均价(元/m²)",
        type: "1",
      },
    ],
    [
      {
        name: "line",
        type: "1",
        areaStyleType: "2",
        stack: "1",
      },
      {
        name: "line",
        type: "1",
        areaStyleType: "2",
        stack: "1",
      },
    ],
    lineBarArr,
    [
      {
				a: "rgba(74, 111, 227, 0.8)",
        b: "rgba(74, 111, 227, 0)",
      },
      {
        a: "rgba(240, 195, 75, 0.8)",
        b: "rgba(240, 195, 75, 0)",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData04.value = paramsData
}
//商品住宅销售面积与价格统计
const getEcharData05 = async() => {
  let { data } = await selectMarketTrendPriceAndArea({ cityCode: cityObj.value.cityCode,startMonth:Data05.value.times});
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
	let legendStyle = {
    show: true,
    left: 5,
    top: 5,
    itemWidth: 18,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "5%",
    right: "5%",
    bottom: "3%",
    top: "28%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "面积(万平方米)",
        type: "1",
      },
						{
        name: "价格(万元)",
        type: "1",
      },
    ],
    [
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "bar",
        type: "2",
        areaStyleType: "1",
        stack: "1",
      },
    ],
    lineBarArr,
    [
      {
								a: "#4F73E7",
        b: "#183FB9",
      },
      {
        a: "#E47D7D",
        b: "#CC3E3E",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData05.value = paramsData
}
//历年住宅销售供应统计
const getEcharData06 = async() => {
  let { data } = await selectResidenceSellSupply({ cityCode: cityObj.value.cityCode,startMonth:Data06.value.times[0],endMonth:Data06.value.times[1]});
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
	let legendStyle = {
    show: true,
    left: 5,
    top: 5,
    itemWidth: 18,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "5%",
    right: "5%",
    bottom: "3%",
    top: "28%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "面积(万平方米)",
        type: "1",
      },
						{
        name: "均价(元/m²)",
        type: "1",
      },
    ],
    [
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
						{
        name: "line",
        type: "2",
        areaStyleType: "1",
        stack: "1",
      },
    ],
    lineBarArr,
    [
      {
								a: "#24E1E7",
        b: "#086063",
      },
      {
        a: "#F0C34B",
        b: "#8A670A",
      },
						{
        a: "#E4871D",
        b: "#E4871D",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData06.value = paramsData
}
// 地图
const realEstateMiddle = async() => {
  let { data } = await selectThermodynamic({ adcode: cityObj.value.cityCode });
  let inventoryRegionDTOS = data.map((item: any) => ({
    name: item.cityName,
    value: [item.houseCount,item.peopleCount],
    code: item.cityCode,
    selected: fixedCityCode == item.cityCode ? true:false,
  }));
  let seriesData = [ inventoryRegionDTOS];
  let paramsData = {
    regions: seriesData,
  };
  realEstateMiddleData.value = paramsData
}
// 获取城市名
const mapNameChange = (e) => {
  console.log(e)
  if (cityObj.value.cityName == e.cityName) {
    cityObj.value = {
      cityName: "",
      cityCode: "",
    };
    allFun();
  } else {
    cityObj.value = e;
    console.log(cityObj.value)
    allFun();
  }
}
//合并柱状折线图数据
const getLineBarArr = (policy: Array<number>,resul: Array<number>): Array<any>=>{
  let type = []
  for(let i = 0 ; i< policy.length;i++){
  type.push(1)
  }
  for(let i = 0 ; i < resul.length;i++){
    type.push(2);
    policy.push(resul[i]);
  }
  return[policy,type]

} 
// 初始化时间
const defaultTime = () => {
  let t = new Date()
  let tYear = t.getFullYear()
  let tYear1 = t.getFullYear()-1
  let tMonth1 = t.getMonth()
  let tMonth2 = t.getMonth()+1
  let tArr = []
  if(tMonth1 < 10){
    tMonth1 = '0' + tMonth1
  }
  if(tMonth2 < 10){
    tMonth2 = '0' + tMonth2
  }
  Data01.value.times = `${tYear}-${tMonth2}`
  Data02.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
  Data03.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
  Data04.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
  Data05.value.times = `${tYear}-${tMonth2}`
  Data06.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
}
// 获取时间组件时间
const timeValueChanges = (va) => {
  console.log(va)
 if(va.type == 1){
  Data01.value.times = va.times
  getEcharData01()
 }else if(va.type == 2){
  Data02.value.times = va.times
  getEcharData02()
 }else if(va.type == 3){
  Data03.value.times = va.times
  getEcharData03()
 }else if(va.type == 4){
  Data04.value.times = va.times
  getEcharData04()
 }else if(va.type == 5){
  Data05.value.times = va.times
  getEcharData05()
 }else if(va.type == 6){
  Data06.value.times = va.times
  getEcharData06()
 }
}
// 打开弹框
const dialogData = (val) => {
  magnifyEchartData.value = val
}
//关闭弹框
const closeDialog = (val) => {
  magnifyEchartData.value = null
}
// 返回
const returnPage = (val) => {
  router.go(-1);
}
const allFun = () => {
  defaultTime()
  getEcharData01()
	getEcharData02()
	getEcharData03()
	getEcharData04()
	getEcharData05()
	getEcharData06()
	realEstateMiddle()
}
allFun();
onMounted(() => {
  cityObj.value = getCityName(fixedCityCode)
});
</script>
<style lang="less" scoped>
.mRight8{
	margin-right: 8px;
}
.page-box{
 width: 100vw;
 height: 100vh;
 background-image: url('../../../assets/img/realEstate/pageBg.png');
 background-size: 100% 100%;
 background-repeat: no-repeat;
 overflow: hidden;
 .page-title{
  width: 100vw;
  height: 85px;
  margin-bottom: 26px;
  background-image: url('../../../assets/img/realEstate/comHousedeal/headBg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
 }
 .page-main{
  width: 100vw;
  height: calc(100vh - 111px);
  display: grid;
  grid-template-columns: repeat(3, 600px);
  grid-template-rows: repeat(3, 300px);
  grid-gap: 20px 10px;
  place-content: start center;
  box-sizing: border-box;
		.page-main-map{
      grid-column: 2 / 2;
      grid-row: 1 / 3;
						padding-top: 100px;
						.mapBox{
								width: 621px;
								height: 400px;
						}
		}
		.page-main-small{
    .page-grid{
    width: 100%;
    .page-grid-title{
     height: 34px;
     width: 100%;
     margin-bottom: 3px;
     img{
      width: 100%;
      height: 100%;
     }
    }
    .page-grid-ec{
     background: rgba(27,126,242,0.1);
     border-radius: 0px 0px 0px 0px;
     border: 1px solid rgba(27,126,242,0.4);
     .time-pic{
						width: 100%;
      height: 31px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 8px;
						.time-title{
							color:#7A8594;
							font-size: 14px;
							padding-left: 20px;
						}
      .time-com{
       padding-left: 15px;
       height: 20px;
       background: rgba(27,126,242,0.2);
       border-radius: 0px 0px 0px 0px;
       border: 1px solid rgba(41,240,250,0.6);
       font-weight: 400;
       font-size: 12px;
       color: #FFFFFF;
       letter-spacing: 1px;
       text-align: right;
			 width:160px;
        img{
          width: 9px;
          height: 6px;
          position: relative;
          bottom: 2px;
          margin-right: 4px;
        }
      }
      .time-coms{
        width: 100px;
      }
      .time-com:hover{
        cursor: pointer;
      }
     }
    }
   }
  }
		.page-footer{
						grid-column: 1 / 4;
      grid-row: 3 / 3;
						display: flex;
						justify-content: space-between;
						.page-main-small{
							width: 49%;
							
						}
		}
	}
}
.map-address {
  position: absolute;
  top: 0px;
  left: 0px;
  letter-spacing: 1px;
  text-shadow: 0px 1px 2px #c1731c;
  font-size: 18px;
  color: #60f9f4;
  letter-spacing: 1.2px;
  margin-left: 27px;
}

.map-address::before {
  content: "";
  position: absolute;
  top: 2px;
  left: -27px;
  width: 20px;
  height: 20px;
  background: url("@/assets/img/personInfor/map-address.png");
  background-size: 100% 100%;
}
.charH{
    height: 253px;
}
/deep/ .el-range-editor.el-input__wrapper{
  width: 130px ;
  height: 25px;
  position: absolute;
  top: 0px;
  right:0px;
		z-index:1;
}
/deep/ .el-date-editor.el-input{
  width: 130px ;
  height: 25px;
  position: absolute;
  top: 0px;
  right:0px;
		z-index:1;
}

/deep/ .el-input__inner{
  cursor: pointer !important;
}
.tab-card{
			position: absolute;
			z-index: 1;
			color: #FFFFFF;
			display: flex;
			right: 40px;
			top: 0px;
			font-size: 16px;
			width: 190px;
			justify-content: space-between;
			.tab-index{
					width: 90px;
					height: 35px;
					display: flex;
					align-items: center;
					justify-content: center;
					background-image: url('../../../assets/img/realEstate/comHousedeal/tabBg.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;
			}
			.tab-index:hover{
				cursor: pointer;
			}
			.tab-indexs{
					width: 90px;
					height: 35px;
					display: flex;
					align-items: center;
					justify-content: center;
			}
			.tab-indexs:hover{
				cursor: pointer;
			}
		}
</style>